<template>
	<view class="container">
		<view class="info">
			<view class="info-des">
				<view class="label">
					<text>网课视频</text>
					<view class="shadow"></view>
				</view>
				<view class="des">
					<text>观看网课视频</text>
					<view class="point">
						<view class="trangle"></view>
					</view>
				</view>
			</view>
			<view class="yan-list">
				<view class="list_item" v-for="(item, index) in datalist" :key="index">
					<image :src="item.coverImage" mode="widthFix" class="list_img"></image>
					<view class="con-main">
						<view class="yan-top">
							<view class="list_text">
								<view class="time">{{ item.createTime + ' 至 ' + item.endTime }}</view>
								<view class="title">{{ item.goodsName }}</view>
							</view>
						</view>
						<view class="yan-bottom">
							<view class="yarn_left">
								{{ item.goodsInfo }}
							</view>
							<view class="btn" @click="toDetail(item)">
								<text>立即报名</text>
								<view class="trangle"></view>
							</view>
						</view>
					</view>
				</view>
				<!-- <view v-if="datalist.length == 0" style="margin-top: 30rpx; text-align: center; width: 100%">暂无数据</view> -->
				<view v-if="datalist.length == 0" style="width: 100%; text-align: center; margin-top: 200rpx">
					<image
						style="width: 500rpx"
						mode="widthFix"
						src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/images/1734702481602ONCKpkWwYg0g4d9d4ebe77ff36c5ee1a1590746db1fb.png"
					/>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import indexApi from '@/api/yanxue/indexPage'
export default {
	data() {
		return {
			datalist: []
		}
	},
	methods: {
		toDetail(item) {
			this.$navTo('pagesA/contest/contest_detail?imgs=' + item.detailImage)
		},
		init() {
			this.getDatalist()
			// this.getHotList();
		},
		getDatalist() {
			indexApi.getGoodsList({ categoryId: 3, page: 1, rows: 100 }).then(res => {
				this.datalist = res.result.list.map(x => {
					x.createTime = x.createTime.split(' ')[0]
					x.endTime = x.endTime.split(' ')[0]
					return x
				})
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	background-color: #f5f5f5;
	padding: 0 24rpx 100rpx;
}

.info {
	// margin-top: 46rpx;
	padding-top: 28rpx;

	.info-des {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.label {
			position: relative;

			text {
				font-family: HarmonyOS Sans SC;
				font-weight: 900;
				font-size: 38rpx;
				color: #000000;
				z-index: 100;
			}

			.shadow {
				margin-top: -12rpx;
				z-index: 99;
				width: 100%;
				height: 8rpx;
				background: #a2ff00;
			}
		}

		.des {
			display: flex;
			align-items: center;

			text {
				font-family: HarmonyOS Sans SC;
				font-weight: 400;
				font-size: 24rpx;
				transform: scale(0.916667);
				color: #747474;
			}

			.point {
				position: relative;
				margin-left: 10rpx;
				width: 20rpx;
				height: 20rpx;
				background-color: #a2ff00;
				border-radius: 50%;

				.trangle {
					position: absolute;
					top: 4rpx;
					left: 4rpx;
					// transform: translate(-50%, -50%);
					width: 0;
					height: 0;
					border-left: 8rpx solid transparent;
					border-right: 8rpx solid transparent;
					border-bottom: 13.856rpx solid #fff;
					transform: rotate(90deg);
				}
			}
		}
	}

	.yan-list {
		.list_item {
			background-color: #fff;
			margin-top: 20rpx;
			border-radius: 20rpx;
			position: relative;

			.list_img {
				width: 100%;
				// height: 852rpx !important;
				border-radius: 20rpx;
			}

			.con-main {
				position: absolute;
				top: 0;
				padding: 36rpx 32rpx 36rpx 48rpx;
				width: 100%;
				height: 100%;

				.yan-top {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.list_text {
						.time {
							font-family: HarmonyOS Sans SC;
							font-weight: 400;
							font-size: 30rpx;
							color: #ffffff;
							text-shadow: 0px 4rpx 20rpx rgba(52, 52, 52, 0.5);
						}

						.title {
							font-family: HarmonyOS Sans SC;
							font-weight: bold;
							font-size: 46rpx;
							color: #ffffff;
							text-shadow: 0px 4rpx 20rpx rgba(52, 52, 52, 0.5);
							margin-top: 32rpx;
						}
					}
				}

				.yan-bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;
					// margin-top: 50%;
					position: absolute;
					bottom: 48rpx;
					left: 48rpx;
					width: 88%;
					.yarn_left {
						height: 30rpx;
						font-family: HarmonyOS Sans SC;
						font-weight: 500;
						font-size: 30rpx;
						color: #ffffff;
						text-shadow: 0px 4rpx 20rpx rgba(52, 52, 52, 0.5);
					}

					.btn {
						width: 166rpx;
						height: 72rpx;
						background: #a2ff00;
						border-radius: 36rpx;
						font-family: HarmonyOS Sans SC;
						font-weight: bold;
						font-size: 26rpx;
						color: #030400;
						line-height: 72rpx;
						text-align: center;
						display: flex;
						align-items: center;
						justify-content: center;

						.trangle {
							width: 0;
							height: 0;
							border-left: 8rpx solid transparent;
							border-right: 8rpx solid transparent;
							border-bottom: 14.248rpx solid #000;
							transform: rotate(90deg);
							margin-left: 8rpx;
						}
					}
				}
			}
		}
	}
}
</style>
